<template>
	<view class="animated fadeIn fast" :class="isBg?'back-box':'back-box2'" @tap="onClick" :style="[isRight?{transform:'rotateY(180deg)'}:{},isBottom?{transform:'rotateZ(-90deg)'}:{},isTop?{transform:'rotateZ(90deg)'}:{},{padding:padding},{margin:margin},{backgroundColor:bgColor}]">
		<view class="back" :style="{borderColor:borderColor,borderWidth:borderWidth}"></view>
	</view>
</template>

<script setup>
	import {ref} from "vue";
	let props = defineProps({
		isBg: {
		    type: Boolean,
		    default: false
		},
		borderColor: {
		    type: String
		},
		borderWidth: {
		    type: String
		},
		padding: {
		    type: String
		},
		margin: {
		    type: String
		},
		isRight: {
		    type: Boolean,
			default: false
		    //default: function(){
			// 	return true;
			// }
		},
		isBottom: {
		    type: Boolean,
		    default: false
		},
		isTop: {
		    type: Boolean,
		    default: false
		},
		bgColor: {
		    type: String
		}
	})
	
//-----------------------------------function------------------------


const emits = defineEmits(['click'])
const onClick = () => {
  emits('click')
}

	
	
</script>

<style scoped lang="scss">
.back-box{
	width: 54rpx;
	height: 54rpx;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.3);
	display: flex;
	justify-content: center;
	align-items: center;	
}
.back-box2{
	width: 20rpx;
	height: 28rpx;
	// background-color: red;
	display: flex;
	justify-content: center;
	align-items: center;
}
.back-box .back,.back-box2 .back{
	width: 16rpx;
	height: 16rpx;
	border-top: 3rpx solid #fff;
	border-left: 3rpx solid #fff;
	transform: rotateZ(-45deg);
	margin-left: 5rpx;
}
</style>
